import './login.scss'
// import { Input, Layout, Button, Checkbox, Form, } from 'antd'
// import { EyeInvisibleOutlined, EyeTwoTone, LockOutlined, UserOutlined } from '@ant-design/icons'
import { React, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Input, message, Image, Radio, Row, Col } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { useStore } from '../store'
import Register from './register'

export default function App () {

  const { loginStore } = useStore()
  const navigate = useNavigate()

  //登录验证
  // async  const onFinish = (values) => {
  async function onFinish (values) {
    try {
      await loginStore.getToken({
        identity: values.usertype,
        username: values.username,
        password: values.password,
        verify: values.passnumber
      })
      toMy(values)
    } catch (e) {
      message.error(e.response?.data?.message || '登陆失败')
    }

  }
  //
  //验证码
  const [captchaUrl, setCaptchaUrl] = useState('/user_server/api/v1/pub/notify/captcha/image')
  const getCaptcha = () => {

    setCaptchaUrl(captchaUrl + ' ')
    console.log(captchaUrl)
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  function toMy (values) {
    if (values.usertype === 1) {
      navigate('/myIndex', { replace: true })
    } else {
      navigate('/student')
    }

    message.success('登录成功')
  }
  const [flage, setFlage] = useState(true)
  function changepage () {
    console.log(flage)
    setFlage(!flage)
  }
  return (

    <div className='login-rex'>
      {/* <h2>Sign in/ Sign up</h2> */}
      <div className={flage ? "container" : "container right-panel-active"} >
        <Register />
        <div className="form-container sign-in-container">
          <Form
            className='form-login'
            name="basic"
            validateTrigger={['onBlur', 'onChange']}//子项用到的触发时机
            id='login'
            labelAlign='left'
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              label='账号'
              rules={[
                {

                  message: 'Please input your username!',
                },
                {
                  // pattern: /^1[3-9]\d{9}$/,
                  // message: '请输入正确的账号',
                  // validateTrigger: 'onBlur'

                }
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="Username" />
            </Form.Item>

            <Form.Item
              name="password"
              label='密码'
              rules={[
                {

                  message: '请输入密码',
                },
                {
                  // len: 6,
                  // message: '请输入正确的六位密码',
                  // validateTrigger: 'onBlur'
                }//校验
              ]}
            >
              <Input.Password prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password" />
            </Form.Item>
            <Form.Item
              name="usertype"
              label='身份'
            >
              <Radio.Group value={0}>
                <Radio value={0}>学生</Radio>
                <Radio value={1}>教师</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item
              name='passnumber'
              label='验证码'
            >
              <Row>
                <Col>
                  <Input
                    placeholder="输入图形验证码" />
                </Col>
                <Col>
                  <Image
                    width={100}
                    height={32}
                    // src='/api/v1/pub/notify/captcha/image'
                    id='captchaImg'
                    src={captchaUrl}
                    alt="点击刷新"
                    preview={false}
                    onClick={getCaptcha}
                    fallback=""
                  >
                  </Image>
                </Col>
              </Row>
            </Form.Item>
            <Form.Item
            >
              <Button type="primary" htmlType="submit"  >
                登录
              </Button>
            </Form.Item>
          </Form>

        </div>
        <div className="overlay-container">
          <div className="overlay">
            <div className="overlay-panel overlay-left">
              <h1>Welcome Back!</h1>
              <p className='p-login'>
                To keep connected with us please login with your personal info
              </p>
              <Button onClick={changepage} shape='round'>去登录</Button>
            </div>
            <div className="overlay-panel overlay-right">
              <h1>Hello,Friend!</h1>
              <p className='p-login'>Enter your personal details and start journey with us</p>
              <Button onClick={changepage} shape='round' >去注册</Button>
            </div>
          </div>
        </div>
      </div>
    </div>




  )
}
